<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <label for="">用户名</label>
        <input type="text" name="username" id="username">
        <br>
        <br>
        <label for="">密码</label>
        <input type="text" name="password" id="password">
        <br>
        <button onclick="login()">登录</button>
</body>

<!-- 
    1.点击登录获取输入框内容并将输入框内容传递给服务端
    2. 后端获取用户登录信息并读取存放用户注册信息的user.json
    3. 若读取用户数据为空数组则表示当前用户未注册，若读取到用户数据不为空数组则判断是否存在当前用户的的注册信息。
    4. 若存在当前用户的注册信息判断用户密码是否正确若密码正确则表示登录成功若密码不正确则表示密码错误
    5. 若注册信息中不存在当前用户则表示用该用户未注册

 -->
 <script>
    function login(){
        let username = document.getElementById("username").value;
        let password = document.getElementById("password").value;
        let xhr = new XMLHttpRequest();
        //get 请求传递参数 可以将请求参数拼接到请求路径上 多个参数 使用& 符号分割 例如: /list?name='张三'&age=18&sex=男
        xhr.open("post",'/login');
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xhr.send(`username=${username}&password=${password}`);
        xhr.onreadystatechange = ()=>{
            if(xhr.readyState===4){
              alert(xhr.response)
              if(xhr.response==='该用户未注册'){
                window.location.href = './regiest.html'
              }
            }
        }
    }
 </script>
</html>